<template>
    <div class="mineInfo">
        <div class="header">
            <div class="header-content">
                <div>
                    <p><van-icon name="manager" color="#ffffff"/>&nbsp;个人资料</p>
                    <p>请您核对详细资料,<br/>若有问题请及时进行反馈</p>
                    <!-- <p></p> -->
                </div>
                <div>
                    <p @click="linkto">反馈列表</p>
                </div>
            </div>
            <div class="header-btn" @click="linkto">个人信息反馈</div>
        </div>
        <div class="content">
            <div class="content-item">
                <div class="title item">基本信息</div>
                <div class="item">
                    <div>姓名</div>
                    <div>{{name}}</div>
                </div>
                <div class="item">
                    <div>性别</div>
                    <div>{{sex}}</div>
                </div>
                <div class="item">
                    <div>身份证号码</div>
                    <div>{{idCard}}</div>
                </div>
                <div class="item">
                    <div>民族</div>
                    <div>{{nation}}</div>
                </div>
                <div class="item">
                    <div>固定电话</div>
                    <div>{{tel}}</div>
                </div>
                <div class="item">
                    <div>手机号码</div>
                    <div>{{mobile}}</div>
                </div>
                <div class="item">
                    <div>家庭住址</div>
                    <div>{{homeAddress}}</div>
                </div>
                <div class="item">
                    <div>收货地址</div>
                    <div>{{receiverAddress}}</div>
                </div>
                <div class="item">
                    <div>收货人</div>
                    <div>{{receiver}}</div>
                </div>
                <div class="item">
                    <div>收货人与老同志关系</div>
                    <div>{{receiverRelationship}}</div>
                </div>
                <div class="item">
                    <div>收货电话</div>
                    <div>{{receiveTel}}</div>
                </div>
                <div class="item">
                    <div>居住情况</div>
                    <div>{{liveInfo}}</div>
                </div>
            </div>
            <div class="content-item">
                <div class="title item">党务信息</div>
                <div class="item">
                    <div>是否中共党员</div>
                    <div>{{inParty}}</div>
                </div>
                <div class="item">
                    <div>入党时间</div>
                    <div>{{inPartyDate}}</div>
                </div>
            </div>
            <div class="content-item">
                <div class="title item">工作信息</div>
                <div class="item">
                    <div>人员类别</div>
                    <div>{{personType}}</div>
                </div>
                <div class="item">
                    <div>参加工作时间</div>
                    <div>{{jobTime}}</div>
                </div>
                <div class="item">
                    <div>离退休前单位及职务</div>
                    <div>{{organization}}</div>
                </div>
                <div class="item">
                    <div>离退休时间</div>
                    <div>{{retireTime}}</div>
                </div>
                <div class="item">
                    <div>离退休前职级</div>
                    <div>{{retireGrade}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { ryjbxxQuerydata4object } from '@/assets/js/api';
export default {
  data() {
    return {
      dspToken: localStorage.dspToken,
      name: '',
      sex: '',
      idCard: '',
      nation: '',
      tel: '',
      mobile: '',
      homeAddress: '',
      receiverAddress: '',
      receiver: '',
      receiverRelationship: '',
      receiveTel: '',
      liveInfo: '',
      inParty: '',
      inPartyDate: '',
      personType: '',
      jobTime: '',
      organization: '',
      retireTime: '',
      retireGrade: ''
    };
  },
  mounted() {
    ryjbxxQuerydata4object({'dspToken': this.dspToken}).then(({data}) => {
      const [extendInfo, baseInfo] = data;
      this.name = baseInfo.userName;
      this.sex = baseInfo.xb;
      this.idCard = extendInfo.sfzh;
      this.nation = baseInfo.mz;
      this.tel = extendInfo.gddh;
      this.mobile = extendInfo.sjh;
      this.homeAddress = extendInfo.jtzz;
      this.receiverAddress = extendInfo.shdz;
      this.receiver = extendInfo.shr;
      this.receiverRelationship = extendInfo.shryltzgx;
      this.receiveTel = extendInfo.sjh;
      this.liveInfo = extendInfo.jz;
      this.inParty = extendInfo.dy;
      this.inPartyDate = extendInfo.rdrq;
      this.personType = extendInfo.ry;
      this.jobTime = extendInfo.cjgzsj;
      this.organization = extendInfo.ltxqdwjzw;
      this.retireTime = extendInfo.ltxsj;
      this.retireGrade = extendInfo.zj;
    });
  },
  methods: {
    linkto() {
      this.$router.push({
        path: '/informationFeedBack'
      });
    }
  },
  components: {
  }
};
</script>

<style lang="less" scoped>
.mineInfo {
    .header {
        width: 100%;
        height: 304px;
        background: #3198ed;
        .header-content {
            display: flex;
            align-items: center;
            >div:first-child {
                flex: 1;
                padding: 36px 0 0 46px;
                color: #ffffff;
                p:first-child {
                    font-size: 40px;
                    display: flex;
                    align-items: center;
                }
                p:last-child {
                    font-size: 30px;
                    color: #cde2ff;
                }
            }
            >div:last-child {
                width: 195px;
                p {
                    height: 75px;
                    line-height: 75px;
                    border-top-left-radius: 38px;
                    border-bottom-left-radius: 38px;
                    background: #ffffff;
                    text-align: center;
                    font-size: 34px;
                    color: #333333;
                }
            }
        }
        .header-btn {
            width: 704px;
            height: 90px;
            line-height: 90px;
            border-radius: 45px;
            text-align: center;
            margin: 0 auto;
            margin-top: 12px;
            color: #3198ed;
            font-size: 36px;
            background: #ffffff;
        }
    }
    .content {
        padding: 23px;
        box-sizing: border-box;
        .content-item {
            background: #ffffff;
            margin-bottom: 21px;
            .title {
                font-size: 30px;
                font-weight: bold;
                color: #343434;
                border-bottom: 1px solid #eeeeee;
                &::before {
                    content: '';
                    width: 4px;
                    height: 22px;
                    background: #3198ed;
                    margin-right:10px;
                    margin-left: 25px;
                    align-self: center;
                }
            }
            .item {
                height: 110px;
                // line-height: 110px;
                border-bottom: 1px solid #eeeeee;
                display: flex;
                width: 674px;
                margin: 0 auto;
                align-items: center;
                div:first-child {
                    color:#333333;
                    font-size: 34px;
                    font-weight: normal;
                    width: 225px;
                    padding-left: 37px;
                }
                div:last-child {
                    flex: 1;
                    font-size: 34px;
                    color: #888;
                    input {
                        width: 100%;
                        font-size: 34px;
                        color: #888;
                    }
                }
                .arrow {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 34px;
                    color: #888
                }
            }
        }
    }
}
</style>
